﻿var ui = (function () {
    function renderLogin() {
        var html = '<div id="login-form" > \
        <label for="login-username-input">Username:</label> \
        <input type="text" id="login-username-input" class="inputField" /> \
        <br /> \
        <label for="login-password-input">Password:</label> \
        <input type="password" id="login-password-input" class="inputField" /> \
        <br /> \
        <button id="login-button">Login</button> \
        </div> \
        <div id="user-register" > \
        <label for="register-username-input">Username:</label> \
        <input type="text" id="register-username-input"  class="inputField"/> \
        <br /> \
        <label for="register-password-input">Password:</label> \
        <input type="password" id="register-password-input" class="inputField" /> \
        <br /> \
        <button id="register-button">Register</button> \
        </div>\
        <div id="error-container"></div>';

        return html;
    }

    function renderLoggedInPage(nickname, users) {
        $('#hello-user-holder').html("Hello, " + nickname + "!" +
            '<button id="logout-button">Logout</button>');

        var html = '<div id="messages">' +
                    '<div id="messages-container"></div>' +
                    '<div id="online-users"><ul>';

        for (var user in users) {
            html += '<li class="online-users-list"><span>' + users[user].Username + '</span></li>';
            //console.log(users[user].Username);
        }


        html += '</ul></div>' +
                '<input type="text" id="message-to-send" size="75"/>' +
                //'<button id="send-message">Send</button>' +
                '</div>';


        //    '<div id="user-logged-in">' +
        //'<span>Hello ' + nickname + ' !</span>\
        //<button id="logout-button">Logout</button>\
        //<div id="console"></div>\
        //<br />\
        //<br />\
        //<div id="field">\
        //<div id="messages">here will have messages...</div>\
        //<input type="text" id="message-to-send"/>\
        //<button id="send-message">Send</button>'

        return html;
    }

    function createMessage(selector, message) {
        var div = $(selector);
        div.html(message);

        return div;
    }

    return {
        getLoginForm: renderLogin,
        getLoggedInForm: renderLoggedInPage
    }
}());